<template>
    <el-table :data="tableData" v-loading="tableLoading" :border="border">
        <el-table-column v-for="(item, index) in columns" :key="index" :label="item.label" :prop="item.prop"
            :width="item.width">


            <template v-slot="{ row }">
                <slot :name="item.prop" :row="row">
                    <!-- {{ row[item.prop] }} -->
                    {{ getProp(row, item) }}
                </slot>
            </template>
        </el-table-column>

        <!-- <el-table-column :label="actionLabel">
            <template v-slot='{ row }'>
                <slot name="action" :row="row"></slot>

            </template>

        </el-table-column> -->

    </el-table>
</template>

<script setup>
//处理传递的属性名是xxx.[0].xxx
let getProp = (row, item) => {
    let reg = /^(.+)\[(\d+)\]\.?(.*)$/
    let matched = item.prop.match(reg)
    if (matched) {
        let arr = row[matched[1]]
        let prop = arr[matched[2]]
        let prop2 = prop[matched[3]]
        return prop2
    }
    return row[item.prop]
}








//定义表格的属性
let props = defineProps({
    "tableData": {
        type: Array
    },
    "columns": {
        type: Array
    },
    "tableLoading": {
        type: Boolean,
        defaul() {
            return false
        }
    },
    "border": {
        type: Boolean,
        defaul() {
            return true
        }
    }
})


//使用方式
//给表格传递的属性
//1.tableData 表格对应的数据

//2.colums 每一列的属性描述，动态表头等等

//columns 传递类型 属性
//         数组 [] label:'表头',prop:'数据对应的字段','width','align'

//插槽：

//通过指定 具名插槽 具名（同columns中的prop），可以自定义表格的内容
</script>
